@charset "utf-8";
@import "reset";
@function r($px){
	@return $px/100px*1rem;
}
.web{
	//background-color: #F1F1F1;
	width: r(640px);
	padding-top: r(89px);
	padding-bottom: r(96px);
	header{
		width: r(640px);
		height: r(89px);
		background-color: #B20000;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: white;
		padding: 0 r(17px);
		position: fixed;
		top: 0;
		img{
			width: r(264px);
		}	
}
    .content-text1{
		//background-color: white;
     	width: r(583px);
     	margin: 0 r(29px);
		margin-top: r(44px);
		height: r(1163px);
     	.text1{
     		font-size: r(33px);
			p{
				font-weight: bolder;
			}
			.right-Text1{
				float: right;
				.r1{
					color: #C5C5C5;
					font-size: r(20px);
					span:nth-of-type(1){
						margin-right: r(80px);	
					}
				}
				.r2{
					p{
						font-size: r(20px);
						color: #C5C5C5;
						span{
							color: #B20000;
						}
					}
				}
			}
			.content1{
				font-size: r(20px);
				color: #C5C5C5;
				float: left;
				margin-top: r(15px);
				text-indent:2em;
			}
			.content2{
				font-size: r(22px);
				margin: r(30px) 0;
				text-indent:2em;
				font-weight: bolder;
				float: left;
			}
			.content3{
				font-size: r(20px);
				color: #C5C5C5;
				float: left;
				margin-top: r(15px);
				text-indent:2em;
			}
			.content-Img{
				width: r(583px);
				height: r(269px);
				margin-top: r(20px);
				float: left;
				img{
					width: 100%;
					height: 100%;
				}
			}
     	}
     }
	 .content-Text2{
		 //background-color: white;
		 width: r(583px);
		 margin: 0 r(29px);
		 .text1{
			 font-size: r(22px);
			 font-weight: bolder;
			 text-indent:2em;
		 }
		 .text2{
			 font-size: r(22px);
			 color: #C5C5C5;
			 text-indent:2em;
			 margin-top: r(20px);
		 }
		 .text3{
		 			 font-size: r(22px);
		 			 color: #C5C5C5;
		 			 text-indent:2em;
		 			 //margin-top: r(20px);
		 }
		 .contnet2-Img{
			 width: r(583px);
			 height: r(161px);
			 img{
				 width: 100%;
				 height: 100%;
			 }
		 }
		 .content2-Img2{
		 			 width: r(583px);
		 			 height: r(279px);
		 			 img{
		 				 width: 100%;
		 				 height: 100%;
		 			 }
	 }
	 .text4{
		 font-size: r(22px);
		 font-weight: bolder;
		 margin-top: r(30px);
	 }
	 .text5{
		  font-size: r(22px);
		  color: #C5C5C5;
		  margin-top: r(30px);
	 }
	 .content2-Img3{
	 		 			 width: r(583px);
	 		 			 height: r(171px);
						 margin-top: r(30px);
	 		 			 img{
	 		 				 width: 100%;
	 		 				 height: 100%;
	 		 			 }
	 }
	 .content2-Img4{
	 		 			 width: r(583px);
	 		 			 height: r(241px);
	 						 margin-top: r(30px);
	 		 			 img{
	 		 				 width: 100%;
	 		 				 height: 100%;
	 		 			 }
	 }
	 .content2-Img5{
	 		 			 width: r(583px);
	 		 			 height: r(299px);
	 						 margin-top: r(30px);
	 		 			 img{
	 		 				 width: 100%;
	 		 				 height: 100%;
	 		 			 }
	 }
	 }
	 .content-text3{
		 width: r(583px);
		 height: r(82px);
		 align-items: center;
		 line-height: r(82px);
		 margin: 0 r(29px);
		 font-size: r(22px);
		 color: #C5C5C5;
		 span{
			 font-size: r(30px);
			 font-weight: bolder;
			 color: #000000;
		 }
	 }
	 .content-text4{
		 display: flex;
		 justify-content: space-around;
		 margin: r(30px) r(29px);
		 div{
			 width: r(73px);
			 height: r(73px);
			 font-size: r(30px);
			 text-align: center;
			 color: #C5C5C5;
			 img{
				 width: 100%;
				 height: 100%;
			 }
		 }
	 }
	 .content-text5{
		 font-size: r(30px);
		 margin: 0 r(29px);
		 margin-top: r(80px);
		 width: r(583px);
		 height: r(193px);
		 border-top: 1px solid #C5C5C5;
		 border-bottom: 1px solid #C5C5C5;
		 text-align: center;
		 line-height: r(193px);
		 color: #C5C5C5;
		 p{
			 a{
				 color: #B20000;
			 }
		 }
	 }
	 .btn{
		 width: r(583px);
		 display: flex;
		 justify-content: center;
		 margin: 0 r(29px);
		 margin-top: r(30px);
		 button{
			 width: r(397px);
			 height: r(55px);
			 margin: 0 auto;
			 border: none;
			 background-color: #B20000;
			 color: white;
			 font-weight: bold;
		 }
	 }
	 .content-pinlun{
		 margin: r(30px) r(29px);
		 p{
			 font-size: r(20px);
			 color: #C5C5C5;
		 }
		 p:nth-of-type(2){
			 align-items: center;
			 font-size: r(25px);
			 color: black;
			 img{
				 width:r(50px);
				 height: r(50px);
				 border-radius: 50%;
			 }
			 span{
				 font-size: r(20px);
				 color: #C5C5C5;
			 }
		 }
		 p:nth-of-type(3){
			 align-items: flex-end;
			 display: flex;
			 justify-content: space-between;
			 margin-top: r(15px);
			 span:nth-of-type(1){
				 font-size: r(25px);
				 color: black;
			 }
		 }
		 p:nth-of-type(4){
			 text-align: right;
			 font-size: r(25px);
			 color: black;
			 margin-top: r(15px);
		 }
		 .pinlunqu{
			 margin: r(20px) r(24px);
			 .one{
				 background-color: #fafafa;
				 padding: r(19px) r(22px);
				 height: r(109px);
				 border-bottom: 1px #C5C5C5 dashed;
				p{
					font-size: r(22px);
					color: black;
					img{
						width:r(30px);
						height: r(30px);
						border-radius: 50%;
					}
				}
				p:nth-of-type(2){
					float: right;
					color: #C5C5C5;
					margin-top: r(10px);
				}
			 }
			 .tow{
				 background-color: #fafafa;
				 padding: r(19px) r(22px);
				 height: r(160px);
				 input{
					 width: r(496px);
					 height: r(70px);
				 }
				 p:nth-of-type(2){
					 float: right;
					 margin-top: r(20px);
					 button{
					 					 width: r(175px);
					 					 height: r(45px);
					 					 margin: 0 auto;
					 					 border: none;
					 					 background-color: #B20000;
					 					 color: white;
					 					 font-weight: bold;
					 }
				 }
			 }
			 hr{
				 border: 1px #C5C5C5 solid;
				 height: 1px;
			 }
			 .more{
				// height: r(120px);
				 p{
					 font-size: r(30px);
					 text-align: center;
				 }
			 }
		 }
	 }
	 .footer_Nav{
	 		width:r(640px);
	 		height: r(96px);
	 		background-color: #f5f5f5;
	 		position: fixed;
	 		bottom:0;
	 		display: flex;
	 		justify-content: space-around;
	 		font-size: 0;
	 		div{
	 			height: 100%;
	 			//width: 20%;
	 			margin-top: r(10px);
	 			font-size: r(20px);
	 			//align-items: center;
	 			text-align: center;
	 			display: block;
	 			color: #8b8b8b;
	 			p{
	 				text-align: center;
	 				i{
	 					font-size: r(55px);
	 				}
	 			}	
	 		}
	 		div:nth-of-type(3){
	 			color: red;
	 		}
	 	}
		.search{
						width: 100%;
						height: 100%;
						background-color: #f1f1f1;
						transform: translateY(100%);
						position: fixed;
						top:0;
						left:0;
						.hotword{
							p{
								font-size: r(40px);
								margin: r(24px) r(34px);
							}
						}		
						.one{
							color:#fefcfd;
							height: r(100px);
							background-color: #1f1f1f;
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 0 r(17px);
							font-size: r(31px);
							.search_box{
								width: r(500px);
								position: relative;
								.search_icon{
									padding-left: r(10px);
									position: absolute;
									top:r(10px);
								}
								.search_1{
									input[type="search"]{
										width: r(500px);
										height: r(58px);
										border-radius: 10px;
										border:solid #fefcfd 0.5px;
										padding-left: r(60px);
										padding-right: r(20px);
										background-color:#1f1f1f ;
										color: white;
								}
							}		
						}
					}
				    .search_world{
				    	margin-left: r(34px);
				    	margin-right: 40px;
						
				    	.line{
				    		display: flex;
				    		justify-content: space-between;
							padding: r(10px) 0;
				    		p{
				    			font-size: r(30px);
								//border: 1px solid black;
								background-color: white;
								padding: r(10px);
				    		}
				    	}
				    }
				}
	.list{
					width:100%;
					height: 100%;
					background-color: #303030;
					transform: translateX(-100%);
					position: fixed;
					top:0;
					overflow: scroll;
					.list_header{
						color:#fefcfd;
						height: r(100px);
						background-color: #21201c;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 0 r(17px);
						font-size: r(31px);
						.colse{}
						.search_header{
							position: relative;
							.sousuo{
								position: absolute;
								top: r(10px);
								margin-left: 6px;
							}
							.search_input{
								
								input[type="search"]{
									width: r(500px);
									height: r(58px);
									border-radius: 10px;
									border:solid #fefcfd 0.5px;
									padding-left: r(60px);
									padding-right: r(20px);
									background-color:#1f1f1f ;
									color: white;
								}
							}
						}
					}
					hr{
						margin: 0 10px;
						border: 0.5px solid #524e4d;
					}
					.login{
						background-color: #222222;
						height: r(450px);
						position: relative;
						padding-top: r(100px);
						.login_img{
							width: r(180px);
							height: r(180px);
							border-radius: 50%;
							margin: 0 auto;
							// position: absolute;
							// top: r(100px);
							img{
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}
						.login_A{
							    width: 50%;
								margin: 0 auto;
								font-size: r(50px);
								p{
									color: white;
									text-align: center;
									a{
										font-size: r(30px);
										color: #505050;
									}
								}
						}
					}
					.operate{
						background-color: #222222;
						margin-top: r(15px);
						//height: 300px;
						.first{		
							color: white;
							font-size: r(30px);
							padding: r(20px);
							label{
								display: flex;
								justify-content: space-between;
							}		
						}	
						input{
							display: contents;
						}
						input:checked + div{
							max-height: r(200px);
							transition: all 1s;
						}
						.second{
							max-height: 0;
							overflow: hidden;
							color: white;
							font-size: r(30px);
							text-align: center;
							//padding: r(20px) 0;
							p{
								padding: r(20px) 0;
							}
						}
					}
				}			
	
}	